<template>
    <div>
        <city-list
            :isCountry="this.isCountry"
            :isCity="this.isCity"
            :country="this.country"></city-list>
        <div class="city-content">
            <card
                v-for="(item, index) in list"
                operate=2
                :title="item.title"
                type="city-list"
                :key="item.id"
                :cityId="item.cityId"
                :bg="item.img"></card>
        </div>
    </div>
</template>

<script>
    import CityList from '@/components/CityList'
    import Card from '@/components/Card'
    import {Util} from '@/js/Util'
    export default {
        components: {
            CityList,
            Card
        },
        mounted() {
            this.hasQuery();
            this.getList();
        },
        data() {
            return {isCountry: false, isCity: true, country: '', list: []}
        },
        methods: {
            hasQuery() {
                let id = this.$route.query.countryId,
                    country = this.$route.query.country;
                if (!id || !country) {
                    this
                        .$router
                        .push({name: 'juejia_index'});
                    return false;
                }
            },
            getList() {
                this.$vux.loading.show({text: 'Loading'});
                let id = this.$route.query.countryId,
                    country = decodeURIComponent(this.$route.query.country);
                this.country = country;
                this
                    .$http
                    .get('scenery/CityList/v1?countryId=' + id)
                    .then(response => {
                        this.$vux.loading.hide();
                        let result = response.data;
                        if (result.code) {
                            this
                                .$vux
                                .toast
                                .text(result.message, 'bottom');
                            return false;
                        }
                        for (let i in result.data) {
                            let item = {
                                cityId: result
                                    .data[i]
                                    .id,
                                title: result
                                    .data[i]
                                    .name,
                                img: result
                                    .data[i]
                                    .picture
                            }
                            this
                                .list
                                .push(item);
                        }
                    }, response => {
                        Util.errorWarning(this);
                    });
            }
        }
    }
</script>

<style lang="less" scoped="scoped">
    .city-content {
        padding-top: 5.5rem;
    }
</style>